<template>
  <el-dialog
    @open="viewStatus ? getGoodsCateInfoFather() : getGoodsCateInfo()"
    :title="viewStatus ? '添加分类' : '修改分类'"
    @close="aditClosed"
    :visible.sync="dialogVisible"
    width="750px"
  >
    <el-form
      :model="addCateList"
      :rules="rules"
      ref="GoodsCateForm"
      label-width="100px"
    >
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="addCateList.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类" v-if="viewStatus">
        <el-cascader
          size="medium"
          v-model="selectdKeys"
          :options="parentCateList"
          @change="parentCateChanged"
          :props="{
            checkStrictly: true,
            expandTrigger: 'hover',
            children: 'children',
            value: 'cat_id',
            label: 'cat_name',
          }"
          clearable
        ></el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="viewStatus ? addGoodsCate() : changeGoodsCate()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { UserInfoRules } from '@/common/mixin'
import {
  getGoodsCateByIdApi,
  getGoodsCateInfoApi,
  addGoodsCateApi,
  changeGoodsCateApi
} from '@/Utils/Api/gitGoodsInfoApi'

export default {
  name: 'changeGoodsCateBox',
  mixins: [UserInfoRules],
  data () {
    return {
      dialogVisible: false,
      viewStatus: false,
      goodsCateId: Number,
      selectdKeys: [],
      pageInfo: {
        type: 2
        // pagenum: 1,
        // pagesize: 5
      },
      // 父级分类的列表
      parentCateList: [],
      addCateList: {
        cat_pid: Number,
        cat_name: '',
        cat_level: Number
      }
    }
  },
  components: {},
  created () {},
  mounted () {},
  methods: {
    // 获得
    async getGoodsCateInfo () {
      const { data } = await getGoodsCateByIdApi(this.goodsCateId)
      if (data.meta.status !== 200) {
        return this.$message({
          type: 'error',
          message: data.meta.msg
        })
      }
      this.addCateList = data.data
      this.$message({
        type: 'success',
        message: data.meta.msg
      })
    },
    // 修改
    async changeGoodsCate () {
      this.$refs.GoodsCateForm.validate(async (vail) => {
        if (!vail) return
        const { data } = await changeGoodsCateApi(this.addCateList.cat_id, { cat_name: this.addCateList.cat_name })
        if (data.meta.status !== 200) {
          return this.$message({
            type: 'error',
            message: data.meta.msg
          })
        }
        this.$emit('changeGoodsCateDrive')
        this.$message({
          type: 'success',
          message: data.meta.msg
        })
        this.dialogVisible = false
      })
    },
    // 添加
    addGoodsCate () {
      this.$refs.GoodsCateForm.validate(async (vail) => {
        if (!vail) return
        try {
          const { data } = await addGoodsCateApi(this.addCateList)
          if (data.meta.status !== 201) {
            // 重新获取列表,刷新视图
            return this.$message({
              type: 'error',
              message: data.meta.msg
            })
          } else {
            this.$emit('changeGoodsCateDrive')
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: data.meta.msg
            })
          }
        } catch (error) {
          console.log(error)
        }
      })
    },
    // 获得父级商品分类
    async getGoodsCateInfoFather () {
      const { data } = await getGoodsCateInfoApi(this.pageInfo)
      this.parentCateList = data.data
    },
    // 添加商品分类选择父分类的事件
    parentCateChanged () {
      console.log(this.selectdKeys)
      if (this.selectdKeys.length > 0) {
        this.addCateList.cat_pid =
          this.selectdKeys[this.selectdKeys.length - 1]
        this.addCateList.cat_level = this.selectdKeys.length
      } else {
        this.addCateList.cat_pid = 0
        this.addCateList.cat_level = 0
      }
    },
    // 关闭窗口后清空表单
    aditClosed () {
      this.$refs.GoodsCateForm.resetFields()
      this.selectdKeys = []
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang='less' scoped>
.el-cascader {
  width: 100%;
}
</style>
